<template>
  <div class="table-container">
    <ex-list :context="ctx">
      <template #querys>
        <el-form-item label="应用">
          <el-radio-group v-model="data.query.app">
            <el-radio-button
              v-for="item in data.meta.apps"
              :key="item"
              :label="item"
            />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="角色名称">
          <el-input v-model="data.query.name" />
        </el-form-item>
        <el-form-item label="角色代码">
          <el-input v-model="data.query.code" />
        </el-form-item>
      </template>
      <template #btns>
        <el-button type="primary" @click="ctx.add()">
          <vab-icon icon="add-line" />
          新增
        </el-button>
      </template>

      <template #columns>
        <!-- <el-table-column type="selection" width="50" /> -->
        <el-table-column label="id" prop="id" sortable width="80" />
        <el-table-column
          label="角色名称"
          prop="name"
          show-overflow-tooltip
          width="150"
        />
        <el-table-column label="角色代码" prop="code" show-overflow-tooltip />
        <el-table-column label="应用" prop="app" show-overflow-tooltip />

        <el-table-column
          align="center"
          fixed="right"
          label="操作"
          show-overflow-tooltip
          width="200"
        >
          <template #default="{ row }">
            <el-button link type="primary" @click="ctx.edit(row)">
              编辑
            </el-button>
            <el-popconfirm
              cancel-button-text="取消"
              confirm-button-text="确定"
              title="确认删除?"
              @confirm="ctx.del(row)"
            >
              <template #reference>
                <el-button link type="primary">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </template>
    </ex-list>
  </div>
</template>
<script setup>
  import useList from '@/hooks/useList'
  import ExList from '@/components/ExList.vue'

  const ctx = useList({ res: 'role', meta: true })
  const { data } = ctx
</script>
